// keep in sync with constant values in CaptionedChart.tsx
$controlRowHeight: 32px; // keep in sync with CONTROLS_ROW_HEIGHT

.CaptionedChart {
    width: 100%;
}

.HeaderHTML,
.SourcesFooterHTML {
    font-family: $sans-serif-font-stack;
    font-feature-settings: $default-font-features;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

.controlsRow {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 16px;

    .controls {
        width: 100%;
    }
}

.relatedQuestion {
    font-size: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid $frame-color;
    position: absolute;
    bottom: 0;
    color: $dark-text;
    font-weight: 700;

    a {
        font-weight: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration-line: underline;
        text-underline-offset: auto;

        &:hover {
            text-decoration-line: none;
        }
    }

    a,
    svg {
        color: inherit;
    }

    svg {
        margin-left: 4px;
        font-size: 0.9em;
        vertical-align: unset;
    }
}
